<template>
  <a-input
    :style="{width:width>0?`${width}px`:'100%'}"
    v-model.trim="val"
    :placeholder="placeholder"
    :disabled="disabled"
    :maxLength="maxLength"
    @blur="onPressEnter"
    @pressEnter="onPressEnter">
    <slot name="prefix" slot="prefix"></slot>
    <slot name="suffix" slot="suffix"></slot>
  </a-input>
  <!--
  前后缀用法示例：
  <ZgInput>
    <i class="fa fa-user" slot="prefix"></i>
    <span slot="suffix">万元</span>
  </ZgInput>
  -->
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    modelVal: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 0
    },
    maxLength: {
      type: Number,
      default: 100
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      val: ''
    }
  },
  mounted () {
    this.val = this.modelVal
  },
  watch: {
    modelVal (v) {
      this.val = v
    },
    val (v) {
      this.$emit('change', v)
    }
  },
  methods: {
    onPressEnter (e) {
      this.$emit('enter')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
